<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.receiveName" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.receivePhone" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
	
		<view class="row picker-row b-b">
			<text class="tit">省市区</text>
			
			<view class="picker-v">
				<picker mode="multiSelector" :range="addressAllArray" range-key="name" :value="valueArray" @columnchange="bindColumnChange" @change="bindAddressChange">
					<view class="uni-input">{{addressData.pcaName_page}}</view>
				</picker>
			</view>
			
		</view>
		<view class="row b-b"> 
			<text class="tit">详细地址</text>
			<input class="input" type="text" v-model="addressData.detailAddress" placeholder="请输入详细地址" placeholder-class="placeholder" />
		</view>
		
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.default" color="#008B8B" @change="switchChange" />
		</view>
		<button class="add-btn" @click="updateaddress()">保存</button>
		<button class="add-btn" @click="deleteaddress()">删除地址</button>
	</view>
</template>

<script>
	import areaJosn from '@/components/area.js'
	import {_addaddress} from '@/service/shop.js'
	import { _deleteaddress} from '@/service/shop.js'
	import { _searchaddress} from '@/service/shop.js'
	import { _updateaddress} from '@/service/shop.js'
	export default {
		data() {
			return {
				testForm:areaJosn ,// ceshi 
				initAddressTree: [],
				addressAllArray: [],
				valueArray: [0, 0, 0],
				noEndValueArray: [0, 0, 0],
				account_user:'17805088097',
				addressData: {
					accountNum:'',
					id: '',
					receiveName: '', // 联系人
					receivePhone: '', // 手机号
					pcaName: '',
					pcaName_page: '',
					pcaId: '',
					detailAddress: '', // 详细地址
					default: true,
					status: 0, // 如果选择为默认地址则为0
					isFirst: true, // 是否是第一次选择地址
				},
				id:''
			}
		},
		onLoad() {
			try{
				let value=uni.getStorageSync('editaddress')
				console.log(value)
				if(value!=0){
					this.addressData.receiveName=value.username_address,
					this.addressData.receivePhone=value.account_address,
					this.addressData.pcaName_page=value.pro_city,
					this.addressData.detailAddress=value.addressdetail,
					this.addressData.default=value.isdefault,
					this.id=value.id
				}
			}catch(e){
				//TODO handle the exception
				console.error(e)
			}
			this.getPCA();
			console.log(this.addressData.pcaName_page)
		},
		watch: {
			'addressData.default' (v) {
				this.addressData.status = v ? 0 : 1;
				console.log(this.addressData.status)
			}
		},
		methods: {
			getPCA() {
				if (this.testForm) {
					let data = this.testForm.data[0].children;
					this.initAddressTree = JSON.parse(JSON.stringify(data));
					if (this.addressData.pcaId) {
						let arr = this.addressData.pcaId.split(',');
						let addArr = [];
						let vArr = [];
						addArr.push(data);
						for (let i = 0; i < data.length; i++) {
							if (data[i].id === arr[0]) {
								vArr.push(i);
								addArr.push(data[i].children);
								for (let j = 0; j < data[i].children.length; j++) {
									if (data[i].children[j].id === arr[1]) {
										vArr.push(j);
										addArr.push(data[i].children[j].children);
										for (let k = 0; k < data[i].children[j].children.length; k++) {
											if (data[i].children[j].children[k].id === arr[2]) {
												vArr.push(k);
												break;
											}
										}
									}
								}
							}
						}
						this.addressAllArray = addArr;
						this.valueArray = vArr;
					} else {
						this.addressAllArray = [data, data[0].children, data[0].children[0].children];
						this.valueArray = [0, 0, 0];
					}
				} else {
					this.initAddressTree = [];
					this.addressAllArray = [];
				}
			},
			// 选择省市区，动态改变选项
			bindColumnChange (event) {
				// this.$nextTick(() => {
					console.log('columnChange:', event);
					console.log(event.detail);
					let {column, value} = event.detail;
					
					this.valueArray.splice(column, 1, value);
					let t = this.initAddressTree;
					if (column === 0) {
						this.addressAllArray = [t, t[value].children, t[value].children[0].children];
					} else if (column === 1) {
						this.addressAllArray = [t, t[this.noEndValueArray[0]].children, t[this.noEndValueArray[0]].children[value].children];
					}
					this.noEndValueArray[column] = value;
					// console.log(this.addressAllArray, this.noEndValueArray);
				// });
			},
			// 完成省市区选择
			bindAddressChange (e){
				console.log('change:', e);
				// #ifdef H5
				if (this.isFirst) {
					this.isFirst = false;
					this.valueArray = this.noEndValueArray;
				} else {
					this.valueArray = e.detail.value;
					this.noEndValueArray = e.detail.value;
				}
				// #endif
				// #ifdef APP-PLUS
				this.valueArray = e.detail.value;
				this.noEndValueArray = e.detail.value;
				// #endif
				let v = this.valueArray;
				let names = [this.addressAllArray[0][v[0]]['name'], this.addressAllArray[1][v[1]]['name'], this.addressAllArray[2][v[2]]['name']];
				let ids = [this.addressAllArray[0][v[0]]['id'], this.addressAllArray[1][v[1]]['id'], this.addressAllArray[2][v[2]]['id']];
				this.addressData.pcaName = names.join(',');
				this.addressData.pcaName_page = names.join(' ');
				this.addressData.pcaId = ids.join(',');
			},
			
			switchChange(e){
				console.log('switchChange: ', e);
				this.addressData.default = e.detail.value;
				console.log(this.addressData.default)
			},
			
			//地图选择地址
			chooseLocation(){
				uni.chooseLocation({
					success: (data)=> {
						console.log(data);
						let {address, name, longitude, latitude} = data;
						this.addressData.addressName = data.address;
						this.addressData.address = data.address;
					}
				})
			},
			
			async updateaddress(){
				let data={
					id:this.id,
					account_address:this.addressData.receivePhone,
					pro_city:this.addressData.pcaName_page,
					addressdetail:this.addressData.detailAddress,
					isdefault:this.addressData.default,
					username_address:this.addressData.receiveName
					
				}
				let res=await _updateaddress(data)
				console.log(res)
				uni.navigateTo({
					url:'/pages/address/address'
				})
			},
			//删除地址
			async deleteaddress(){
				let data={
					account_user:this.account_user,
					account_address:this.addressData.receivePhone,
					pro_city:this.addressData.pcaName_page,
					addressdetail:this.addressData.detailAddress,
					username_address:this.addressData.receiveName
				}
				let res=await _deleteaddress(data)
				console.log(res)
				this.$api.msg('删除地址成功！')
				uni.navigateTo({
					url:'/pages/address/address'
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height: 110upx;
		background: #fff;
		
		.tit{
			flex-shrink: 0;
			width: 146upx;
			font-size: 30upx;
			// color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			// color: $font-color-dark;
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			// color: $font-color-light;
		}
		&.picker-row{
			font-size: 0;
			.picker-v{
				flex: 1;
				height: 30upx;
				picker{
					height: 100%;
					width: 100%;
				}
				.uni-input{
					font-size: 30upx;
					// color: $font-color-dark;
				}
			}
		}
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		color: #fff;
		background-color: #138f87;
		border-radius: 56.25rpx;
	}
</style>